<template>
  <div class="editor-wrapper">
    <Toolbar class="toolbar-controller" :editor="editorRef" :defaultConfig="toolbarConfig" />
    <Editor class="editor-controller" v-model="modelValue" :defaultConfig="editorConfig" @onCreated="handleCreated" />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Cookies from 'js-cookie'
import useUpload from '@/hooks/useUpload'
const { uploadFile } = useUpload()

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const modelValue = defineModel()

const requestUrl = (options) => {
  const { method, url, contentType, body, token } = options
  let xhr = new XMLHttpRequest()
  xhr.open(method || 'POST', url, true)
  if (contentType) {
    xhr.setRequestHeader('Content-Type', contentType)
  }
  if (token) {
    xhr.setRequestHeader('Authorization', token)
  }
  xhr.send(body)
  return new Promise((resolve, reject) => {
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          const json = xhr.responseText ? JSON.parse(xhr.responseText) : {}

          resolve(json)
        } else {
          reject(xhr.responseText)
        }
      }
    }
  })
}
const toolbarConfig = {
  excludeKeys: ['emotion', 'fullScreen'], // 仅移除表情按钮
}
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 自定义上传
      async customUpload(file, insertFn) {
        let formData = new FormData()
        formData.append('file', file)
        const params = {
          url: `/api-parking/system/oss/upload`,
          body: formData,
          token: Cookies.get(process.env.envConfig.TOKEN),
        }
        // 从 res 中找到 url alt href ，然后插入图片
        const resp = await requestUrl(params)
        const { url, fileName } = resp.data

        insertFn(url, fileName, url)
      },
      // 自定义插入图片
      async customInsert(file, insertFn) {
        let formData = new FormData()
        formData.append('file', file)
        const params = {
          url: `/api-parking/system/oss/upload`,
          body: formData,
          token: Cookies.get(process.env.envConfig.TOKEN),
        }
        // 从 res 中找到 url alt href ，然后插入图片
        const res = await requestUrl(params)
        const { url, fileName } = res.data
        insertFn(url, fileName, url)
      },
    },
    uploadVideo: {
      // 自定义上传视频
      async customUpload(file, insertFn) {
        let formData = new FormData()
        formData.append('file', file)
        const params = {
          url: `/api-parking/system/oss/upload`,
          body: formData,
          token: Cookies.get(process.env.envConfig.TOKEN),
        }
        // 从 res 中找到 url alt href ，然后插入图片
        const res = await requestUrl(params)
        const { url, fileName } = res.data
        insertFn(url, fileName)
      },
      // 自定义插入视频
      async customInsert(file, insertFn) {
        let formData = new FormData()
        formData.append('file', file)
        const params = {
          url: `/api-parking/system/oss/upload`,
          body: formData,
          token: Cookies.get(process.env.envConfig.TOKEN),
        }
        // 从 res 中找到 url alt href ，然后插入图片
        const res = await requestUrl(params)
        const { url, fileName } = res
        insertFn(url, fileName)
      },
    },
  },
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

<style lang="scss" scoped>
.editor-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  .toolbar-controller {
    border-bottom: 1px solid #dcdfe6;
  }
  .editor-controller {
    min-height: 300px;
    overflow: hidden;
  }
}
</style>
<style>
.w-e-modal .babel-container span {
  margin-bottom: 0px;
}
.w-e-modal .babel-container {
  margin-bottom: 10px;
}
</style>
